<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
</head>

<body>

    <header class="goods-head" style="padding-top:0.4rem;">
        <div class="goods-head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3>商品详情</h3>
        <div class="goods-head-r" tapmode onclick="collection()"><span id="collection_id" class="on"></span></div>
    </header>

    <div id="aui-slide">
        <div class="aui-slide-wrap">
            <div class="aui-slide-node bg-dark">
                <img src="./image/l1.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./image/l2.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./image/l3.png" />
            </div>
        </div>
        <div class="aui-slide-page-wrap">
            <!--分页容器-->
        </div>
        <div class="aui-slide-num"></div>
    </div>

    <script type="text/template" id="templateImage">
        <div class="aui-slide-wrap">
            {{~it:value:index}}
            <div class="aui-slide-node bg-dark">
                <img src="{{=value}}" />

            </div>
            {{~}}
        </div>
        <div class="aui-slide-page-wrap">
            <!--分页容器-->
        </div>
    </script>


    <div id='list'>
        <dl class="goods-1">
            <dt>毛孔脏东西浮出来·麦卢卡蜂蜜排毒清洁面膜 70g</dt>
            <dd>￥166.00<del>￥200.00</del></dd>
            <p>重量：70g<span>已售{{=}}件</span></p>
        </dl>
        <ul class="goods-2 mb20">
            <h3>产品参数</h3>
            <li>商品名称<span>麦卢卡蜂蜜排毒清洁面膜</span></li>
            <li>重量<span>70g</span></li>
            <li>品牌<span>Swisse</span></li>
            <li>是否为特殊用途化妆品<span>否</span></li>
            <li>产地<span>澳大利亚</span></li>
        </ul>
        <div class="goods-3">
            <div class="goods-3-t">产品详情</div>
            <img src="image/goods-details.jpg">
        </div>

        <div class="cart-d-t"></div>
        <div class="goods-d">
            <span>加入购物车</span>
            <span onclick="goods_details_on()">立即购买</span>
        </div>
    </div>

    <script type="text/template" id="template">

        <div class="shop-cart-bg">
            <div class="goods-box">
                <div class="goods-box-t">选择数量<i class="fa fa-close" onclick="goods_details_off()"></i></div>
                <div class="goods-box-m">
                    <div class="shop-num">
                        <i class="jian" onclick="change_count('jian')"></i>
                        <!-- <input type="text" value="1" id='count' readonly="readonly"> -->
                        <input type="number" value="1" id='count'>
                        <i class="jia" onclick="change_count('jia')"></i>
                    </div>
                </div>
                <!-- <div class="goods-box-btn" tapmode onclick="goods_details_on({{=it.data.id}})">确定</div> -->
            </div>
        </div> 




        <dl class="goods-1">
            <dt>{{=it.data.title}}</dt>
            <dd>￥{{=it.data.price_current}}<del>￥{{=it.data.price}}</del></dd>
            <p>{{=it.data.unit_title}}：{{=it.data.unit}}<span>已售{{=it.data.number_sales}}件</span></p>
        </dl>
        <!-- {{=it.data.html_desc}} -->
        <ul class="goods-2 mb20">
            <div class="goods-3-t">产品参数</div>
            <!-- <h3>{{=it.data.html_desc}}</h3> -->
            <h3>{{=it.data.html_standard}}</h3>

          <!-- <li>商品名称<span>麦卢卡蜂蜜排毒清洁面膜</span></li>
          <li>重量<span>70g</span></li>
          <li>品牌<span>Swisse</span></li>
          <li>是否为特殊用途化妆品<span>否</span></li>
          <li>产地<span>澳大利亚</span></li> -->
      </ul>
      <!-- <div class="goods-3"> -->
      <ul class="goods-2 mb20">

        <div class="goods-3-t">产品详情</div>
        <!-- <img src="image/goods-details.jpg"> -->
        <!-- {{=it.data.html_standard}} -->
        <!--    <h3>{{=it.data.html_standard}}</h3> -->
        <h3>{{=it.data.html_desc}}</h3>


    </div>

    <div class="cart-d-t"></div>
    <div class="goods-d">
        <span onclick="add_cart({{=it.data.id}})">加入购物车</span>
        <span onclick="goods_details_on({{=it.data.id}})">立即购买</span>
    </div>
</script>




</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript" src="./script/aui-slide.js"></script>
<script type="text/javascript">
    apiready = function() {

        token = $api.getStorage('token');
        token = 'Bearer ' + token;
        getData();
        // 下拉刷新
        pullRefresh();
        // alert(api.pageParam.id);
    }

    function getData() {
        var token = $api.getStorage('token');
        // 进度提示框
        api.showProgress({
            title: '努力加载中...',
            text: '请稍等...',
            modal: false
        });

        var id = api.pageParam.id;

        var data_url = webAddress + '/api/product/' + id + '/show';
        api.ajax({
            url: data_url,
            method: 'get',
            data: {

            },
            headers: {
                Authorization: 'Bearer ' + token,
                Accept: 'application/json',
            },
        }, function(ret, err) {
            if (ret) {
                goods_id = ret.data.id;
                if(ret.data.is_collection == 0){
                    $("#collection_id").attr("class","on");
                }else if(ret.data.is_collection == 1){
                    $("#collection_id").attr("class","off");
                }
                // 关闭进度提示
                api.hideProgress();
                // 关闭下拉刷新控件
                api.refreshHeaderLoadDone();

                // alert(JSON.stringify(ret));

                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('list');
                $api.html(list, html);


                var template = $api.byId('templateImage');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.data.slides);
                var list = $api.byId('aui-slide');
                $api.html(list, html);

                var slide = new auiSlide({
                    container: document.getElementById("aui-slide"),
                    //"width":300, //宽度
                    "height": 240, //高度
                    "speed": 500, //速度
                    "autoPlay": 3000, //自动播放
                    "loop": true, //是否循环
                    "pageShow": true, //是否显示分页器
                    "pageStyle": 'dot', //分页器样式，分dot,line
                    'dotPosition': 'center', //当分页器样式为dot时控制分页器位置，left,center,right
                    currentPage: currentFun
                })


                $('img').css('width','100%');
                $('img').css('height','auto');

            } else {
                // alert(JSON.stringify(err));
                // 关闭进度提示
                api.hideProgress();
            }
        });
    }


    // 下拉刷新
    function pullRefresh() {
        api.setRefreshHeaderInfo({
            // loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            getData();
        });
    }


    function shop_order_details() {
        api.openWin({
            name: 'shop_order_details',
            url: './shop_order_details.html',
        });
    }

    function closeWin() {
        api.closeWin({});
    }
    // var slide = new auiSlide({
    //     container: document.getElementById("aui-slide"),
    //     // "width":300,
    //     "height": 260,
    //     "speed": 300,
    //     "pageShow": true,
    //     "autoPlay": 3000, //自动播放
    //     "pageStyle": 'dot',
    //     "loop": true,
    //     'dotPosition': 'center',
    //     currentPage: currentFun
    // })

    function currentFun(index) {
        // console.log(index);
    }


    function add_cart(index) {
      var temp= $(".shop-cart-bg").is(":visible");//是否可见

      if (temp ==false) {
        $(".shop-cart-bg").show();
        $(".goods-box").animate({
          bottom:"1rem"
      });
    }else {
        var count = $('#count').val();
        api.ajax({
            url: webAddress + '/api/cart/add',
            method: 'post',
            headers: {
                'Authorization': token
            },
            data: {
                values: {
                    product_id: index,
                    number: count,
                    category: 1
                },
            }
        }, function(ret, err) {
            if (ret) {
                api.toast({
                    msg: '添加购物车成功!',
                    duration: 2000,
                    location: 'bottom'
                });
                $(".shop-cart-bg").hide();
                api.execScript({
                    name: 'root',
                    frameName: 'shop',
                    script: 'get_cart();'
                });


            } else {
                // alert(JSON.stringify(err));
            }
        });

    }

}

function goods_details_on(index){

      var temp= $(".shop-cart-bg").is(":visible");//是否可见

      if (temp ==false) {
        $(".shop-cart-bg").show();
        $(".goods-box").animate({
          bottom:"1rem"
      });
    }else {
      var count = $('#count').val();

      api.ajax({
          url: webAddress + '/api/cart/add',
          method: 'post',
          headers: {
              'Authorization': token
          },
          data: {
              values: {
                  product_id: index,
                  number: count,
                  category: 2
              },
          }
      }, function(ret, err) {
          if (ret) {
            var ids = ret.data.id;
            api.openWin({
                name: 'shop_order_details',
                url: './shop_order_details.html',
                pageParam: {
                    ids: ids
                }
            });
        } else {
          // alert(JSON.stringify(err));
      }
  });



  }


}


function collection(){
    var id = goods_id;
    var token = $api.getStorage('token');
    api.ajax({
        url: webAddress + '/api/product/' + id + '/collection',
        method: 'get',
        data: {

        },
        headers: {
            Authorization: 'Bearer ' + token,
            Accept: 'application/json',
        },
    },function(ret, err){
        if (ret) {
            // alert( JSON.stringify( ret ) );
            if (ret.status_code == 200) {
                if(ret.data.is_collection == 1){
                    api.toast({
                        msg: '收藏成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    $("#collection_id").attr("class","off");
                }else if(ret.data.is_collection == 0){
                    api.toast({
                        msg: '取消收藏成功',
                        duration: 2000,
                        location: 'bottom'
                    });
                    $("#collection_id").attr("class","on");
                }
                api.sendEvent({
                  name: 'new_reload'
              });
            }
        } else {
            api.toast({
                msg: '网络错误',
                duration: 2000,
                location: 'bottom'
            });
        }
    });
}


function change_count(type) {

  var count = $('#count').val();
  if (type == 'jia') {
      count = parseInt(count) + 1;
      $('#count').val(count);

  } else {
    if (count <= 1) {
      return;
  }
  count = parseInt(count) - 1;
  $('#count').val(count);
}

}


    // function goods_details_on(index) {
    //   api.ajax({
    //       url: webAddress + '/api/cart/add',
    //       method: 'post',
    //       headers: {
    //           'Authorization': token
    //       },
    //       data: {
    //           values: {
    //               product_id: index,
    //               number: 1,
    //               category: 1
    //           },
    //       }
    //   }, function(ret, err) {
    //       if (ret) {
    //
    //         // console.log(JSON.stringify(ret));
    //         var ids = ret.data.id;
    //         api.openWin({
    //             name: 'shop_order_details',
    //             url: './shop_order_details.html',
    //             pageParam: {
    //                 ids: ids
    //             }
    //         });
    //
    //
    //       } else {
              // alert(JSON.stringify(err));
    //       }
    //   });
    //
    //
    // }
</script>

</html>
